<template>
  <div>
    <el-row style="margin-top:10px">
        <el-col :span="4">
            <div class="left_nav">
                <el-input
                placeholder="视频筛选(只有展开过的列表才能被筛选)"
                icon="search"
                v-model="filterText"
                >
                </el-input>
                <el-tree style="margin-top:5px"
                :data="data" ref="tree10"
                :props="defaultProps"
                :load="loadNode"
                lazy
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
                @check-change="handleCheckChange"></el-tree>
            </div>
        </el-col>
        <el-col :span="20">
            <iframe id="myframe" frameborder="no" border="0" allowfullscreen="true" allowtransparency="true"  style="width:100%;height:700px;scrolling:no" :src="url">
            </iframe>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import * as api from "@/api/videoManage";
import {hex_md5} from "@/utils/md5"
export default {
  watch: {
    filterText(val) {
      this.$refs.tree10.filter(val);
    }
  },
  data() {
      return {
        url: `http://${window.location.host}/msmis/hkws/hkws.html`,
        filterText: "",
        data: [],
        gridData: [],
        defaultProps: {
          label: "label",
          children: "children"
        },
        appKey:'7be39a0f',
        secret:'41d33fe49e8a4761b75e107197c85fe6',
        iframe:null
      }
    },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        api.getNetGridForTree().then(res => {
          this.gridData = res.data;
          return resolve(this.gridData);
        });
      }
      if (node.level === 1) {
        setTimeout(() => {
          api.getVideoForTree(node.data.id).then(res => {
            return resolve(res.data);
          });
        },200);
      }
      if (node.level > 1) {
        return resolve([]);
      }
    },
    postMessage(param){
      this.iframe.postMessage(param,this.url);
    },
    handleNodeClick({url}){
        if(url!=null){
          this.postMessage(url)
        }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    listenChildMessage(){
      window.addEventListener('message',(data)=>{
        console.log(data);
      })
    },
    // GetMilSeconds(){
    //   return new Date().getTime();
    // },
    // async getCamera(uuid){
    //   let time = this.GetMilSeconds();
    //   let params = {
    //     appKey:this.appKey,
    //     time:time,
    //     cameraUuid:uuid
    //   }
    //   let res = await api.getCamera(this.GetSinglePreviewToken(time,uuid),JSON.stringify(params));
    // },
    // GenToken(uri, strParam, mySecret) {
    //   let srcStr = uri + strParam + mySecret;
    //   let token = hex_md5(srcStr).toUpperCase();    // 生成token
    //   return token;
    // },
    // GetSinglePreviewToken(time, uuid) {
    //   let uri = "/openapi/service/vss/preview/getPreviewParamByCameraUuid";
	  //   let strParam = {"appkey":this.appKey,"time":time,"cameraUuid":uuid};
	  //   let token = this.GenToken(uri, JSON.stringify(strParam), this.secret);
	  //   return token;
    // },
    // initSpvx(){
    //   let languageType = 1;
    //   var ret = this.ocxObj.MPV_Init(languageType);
    //   if (ret != 0) {
    //     alert("单路预览初始化失败");
    //   }
    // },

  },
  mounted(){
    this.listenChildMessage();
    this.iframe = document.getElementById('myframe').contentWindow;
  }
};
</script>

<style scoped>
.top_header {
  width: 100%;
  height: 100px;
  background: rebeccapurple;
}
.header_title {
  color: white;
  font-size: 30px;
  font-family: sans-serif;
  line-height: 95px;
  padding: 200px;
}
.back_menu {
  color: white;
  line-height: 100px;
  display: inline-block;
  cursor: pointer;
  padding-left: 10px;
}
.my_nav {
  padding: 12px;
  font-size: 20px;
  background-color: #e5e9f2;
}
.left_nav {
  width: 100%;
  height: 100%;
  padding-left: 5px;
}
</style>
